<template>
    <!-- pages/myincome/referrer/index.wxml -->
    <view class="pages">
        <image class="referrer-bg" :src="imgUrl + 'referrerbg.png'"></image>
        <image class="referrer-title" :src="imgUrl + 'referrertitle.png'"></image>
        <view class="title">更多积分等你来拿</view>
        <image class="referrer-box" :src="imgUrl + 'referrerbox.png'"></image>
        <image class="referrer-person" :src="imgUrl + 'referrerperson.png'"></image>
        <view class="bigbox">
            <view class="box">
                <view class="centers center">
                    <image class="referrer-lr" :src="imgUrl + 'referrerleft.png'"></image>
                    <view>邀请规则</view>
                    <image class="referrer-lr" :src="imgUrl + 'referrerright.png'"></image>
                </view>
                <view class="referrer-text mt-20">现在填写朋友圈推荐码，</view>
                <view class="referrer-text">
                    推荐及被邀请双方都可获得
                    <text class="textcolor">50意豆</text>
                    奖励哦
                </view>
                <view class="inpbox">
                    <input class="weui-input" @input="bindKeyInput" placeholder="请输入邀请码" />
                </view>
                <view @tap="onSubmitcode" class="btn">提交</view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/myincome/referrer/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            code: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 获取邀请码
        bindKeyInput(e) {
            const { value } = e.detail;
            this.setData({
                code: value
            });
        },

        // 提交
        onSubmitcode() {
            _request
                .postObj('/recomUser/bindInviteCode', {
                    userId: uni.getStorageSync('userid'),
                    invitecode: this.code
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: '绑定成功',
                            icon: 'none',
                            duration: 1000,
                            success: () => {
                                setTimeout(() => {
                                    uni.navigateBack({
                                        delta: -1
                                    });
                                }, 2000);
                            }
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 2000
                        });
                        return;
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },

        // 获取code
        onChangeInput(e) {}
    }
};
</script>
<style>
/* pages/myincome/referrer/index.wxss */

.pages {
    width: 750rpx;
    height: 1446rpx;
    position: relative;
}

.referrer-bg {
    width: 750rpx;
    height: 1446rpx;
}

.referrer-title {
    width: 634rpx;
    height: 134rpx;
    position: absolute;
    top: 60rpx;
    z-index: 2;
    display: block;
    left: 58rpx;
}

.title {
    width: 100%;
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff2e6;
    line-height: 50rx;
    letter-spacing: 2px;
    position: absolute;
    text-align: center;
    top: 194rpx;
}

.referrer-box {
    position: absolute;
    top: 284rpx;
    width: 554rpx;
    height: 488rpx;
    z-index: 2;
    display: block;
    left: 98rpx;
}

.referrer-person {
    position: absolute;
    top: 510rpx;
    width: 646rpx;
    height: 180rpx;
    z-index: 4;
    display: block;
    left: 52rpx;
}

.bigbox {
    width: 710rpx;
    height: 620rpx;
    background: #ff882e;
    border-radius: 8px;
    position: absolute;
    bottom: 160rpx;
    left: 20rpx;
    z-index: 3;
}

.box {
    width: 670rpx;
    height: 600rpx;
    background: #ffffff;
    border-radius: 8px;
    margin: 10rpx auto;
    padding-top: 40rpx;
    box-sizing: border-box;
}

.referrer-lr {
    width: 66rpx;
    height: 20rpx;
}

.center {
    justify-content: center;
}

.center > view {
    margin: 0 30rpx;
    height: 56rpx;
    font-size: 40rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 56rpx;
    letter-spacing: 2px;
}

.textcolor {
    color: #ff8722;
}

.referrer-text {
    width: 100%;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
    letter-spacing: 1px;
    text-align: center;
}

.inpbox {
    width: 300rpx;
    border-bottom: 1px solid #ff8722;
    margin: 0 auto;
    margin-top: 100rpx;
    padding-bottom: 20rpx;
}

.weui-input {
    width: 216rpx;
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 44rpx;
    letter-spacing: 2px;
    margin: 0 auto;
    text-align: center;
}

.btn {
    width: 400rpx;
    height: 88rx;
    background: #ff8722;
    box-shadow: 0px 2px 4px 0px #ffca9d;
    border-radius: 22px;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    text-shadow: 0px 2px 4px #ffca9d;
    text-align: center;
    margin: 0 auto;
    margin-top: 100rpx;
}
</style>
